import { Card, Button } from 'flowbite-react'
import { FaClock } from 'react-icons/fa'

export default function StudyCard({ 
  card, 
  showAnswer, 
  onShowAnswer, 
  onAnswer,
  deckName,
  remainingCount,
  onEndStudy 
}) {
  return (
    <>
      <div className="flex justify-between items-center mb-8">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">{deckName}</h1>
          <p className="text-gray-500 mt-2">剩余 {remainingCount} 张卡片</p>
        </div>
        <Button color="gray" onClick={onEndStudy}>结束学习</Button>
      </div>

      <Card className="mb-6">
        <div className="prose max-w-none mb-6">
          <div dangerouslySetInnerHTML={{ __html: card?.front || '' }} />
        </div>
        
        {!showAnswer ? (
          <Button color="blue" onClick={onShowAnswer} className="w-full">
            显示答案
          </Button>
        ) : (
          <>
            <div className="prose max-w-none mb-6 pt-6 border-t">
              <div dangerouslySetInnerHTML={{ __html: card?.back || '' }} />
            </div>
            
            <div className="grid grid-cols-4 gap-2">
              <Button color="failure" onClick={() => onAnswer(1)}>完全不会</Button>
              <Button color="warning" onClick={() => onAnswer(2)}>比较困难</Button>
              <Button color="info" onClick={() => onAnswer(3)}>记得一些</Button>
              <Button color="success" onClick={() => onAnswer(4)}>记得很清楚</Button>
            </div>
          </>
        )}
      </Card>

      <div className="text-sm text-gray-500 flex items-center gap-2">
        <FaClock className="text-gray-400" />
        下次复习时间：{new Date(card.nextReview).toLocaleDateString()}
      </div>
    </>
  )
}